前言：
當我們的專案內容越來越大，組件越切越多時，我們有很高的機率會需要在多個組件內使用同一個資料狀態，無論是多個頁面依賴同一個狀態或是多個頁面會需要讀取/更改同一個狀態時，都會遇到十分多的問題，那怕解決了也很容易造成維護上的困難，因此， Vuex 誕生了
正文：
我們先看一下透過 vue-cli 所建立的 vuex 有甚麼內容吧

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

state：
在 vuex 中，我們可以將多個組件同時會用到的狀態放置 store.state 中，當我們需要時引用他即可，由於 vuex 採用單一狀態樹的結構，因此在 store 下所有狀態會被集中在這裡

mutation：
當我們需要更改 vuex 狀態時，唯一的方法是透過提交 mutation 去對狀態進行更改，下方提供一個例子
store

state: {
    count: 0
},
mutations: {
    increment: function(state,payload){
        state.count += payload.amount
    }
}

test.vue

<p>{{count}}</p>
<button @click="addCount(5)">count + 5</button>
import store from '@/store/index.js'
methods: {
    addCount: function(addedCount){
        store.commit({
            type: 'increment',
            amount: addedCount
        })
    }
},
computed: {
    count: function(){
        return store.state.count
    }
}

我們必須透過 commit 來呼叫 vuex 中的 mutation 才能對數據進行更改

actions:
actions 與 mutation 類似，一樣是針對更改 state 使用，差別是 actions 可以接受非同步事件，而 mutation 則僅接受同步事件
mutation 是透過 store.commit() 來進行資料更改，actions 則是透過 store.dispatch() 去進行資料更改

module:
前面有提到，vuex採用的是單一狀態樹的結構，當我們專案變得越來越複雜時狀態也隨之變的更多，因此 vuex 允許我們使用 module 來將 store 切割成多個模組，而每個模組都有屬於自己的 state，actions，mutation。

vuex 內容先介紹到這邊，和 router 一樣，還有很多內容可以去挖掘，這邊先講些最基本的概念，深入的內容等到後續實戰在繼續分享吧